<template>
  <basic-container>
    <section class="haruyuki-bg-color-white">
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-user"></i
          ><span class="haruyuki-ml-6 haruyuki-mr-6">{{ labelData.basicTitle }}</span>
          <el-tag class="haruyuki-ml-6 tag-custom" v-if="mainData.userCateName" color="#434343" size="small">{{ mainData.userCateName }}</el-tag>
        </div>
        <div>
          <!-- <el-tag v-if="mainData.roaStatus" :type="getRoaStatus(mainData.roaStatus)" effect="dark">{{ roaStatusName }}</el-tag> -->
          <el-tag v-if="basicData.settlementModeStatus == '0'" class="haruyuki-mr-6" :type="getRoaStatus(basicData.settlementModeStatus)">{{ basicData.settlementMode == '2'?'月结':'日结' }}模式 │ {{ getSettlementStatus(basicData.settlementModeStatus) }}</el-tag>
          <el-tag v-if="mainData.roaStatus" :type="getRoaStatus(mainData.roaStatus)">认证信息 │ {{ mainData.roaStatusName }}</el-tag>
        </div>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="6">
            <span>服务商名称：{{ basicData.serviceName }}</span>
          </el-col>
          <!-- <el-col :span="6">
            <span>服务商类型：{{ basicData.serviceTypeName }}</span>
          </el-col> -->
          <el-col :span="6">
            <span>联系人：{{ basicData.contactName }}</span>
          </el-col>
          <el-col :span="6">
            <span>联系电话：{{ basicData.contactNumber }}</span>
          </el-col>
          <el-col :span="6">
            <span
              >所在区域：{{ basicData.provinceName }}/{{
                basicData.cityName
              }}/{{ basicData.areaName }}</span
            >
          </el-col>
          <el-col :span="6">
            <span>联系地址：{{ basicData.address }}</span>
          </el-col>
          <el-col :span="6">
            <span>邮箱：{{ basicData.email }}</span>
          </el-col>
          <el-col :span="6" v-if="basicData.settlementMode">
            <span>结算模式：{{ getSettlementMode(basicData.settlementMode) }}</span>
          </el-col>
          <el-col :span="6">
            <span>合作状态：{{ basicData.isCooperateName }}</span>
          </el-col>
          <el-col :span="6">
            <span>分润状态：{{ basicData.profitStateName }}</span>
          </el-col>
          <el-col :span="6">
            <span>合同状态：{{ basicData.cooperateStateName }}</span>
          </el-col>
          <el-col :span="6">
            <span>异常状态原因：{{ basicData.exceptionMsg }}</span>
          </el-col>
          <el-col :span="6" v-if="basicData.remark">
            <span>备注：{{ basicData.remark }}</span>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="20">
              <el-col :span="24">
                <span
                  class="picture-preview"
                  @click.stop="picDetails(basicForm.incomingCode)"
                  >资质证件照预览</span
                >
                <span
                  class="picture-preview haruyuki-ml-6"
                  @click.stop="picUpdate(basicForm.incomingCode)"
                  >资质证件照补充</span
                >
              </el-col>
            </el-row> -->
      </div>
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-postcard"></i
          ><span class="haruyuki-ml-6">{{ labelData.mainTitle }}</span>
        </div>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="24">
            <span>认证照片：</span>
          </el-col>
          <el-col :span="3" v-if="basicData.serviceType == 1">
            <div class="haruyuki-image-preview">
              <div class="haruyuki-image">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="mainData.roaLicenseImageUrl"
                  z-index="5000"
                  :preview-src-list="[mainData.roaLicenseImageUrl]"
                  fit="contain"
                >
                </el-image>
                <span class="haruyuki-text">营业执照照片</span>
              </div>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="haruyuki-image-preview">
              <div class="haruyuki-image">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="mainData.roaCardPositiveUrl"
                  z-index="5000"
                  :preview-src-list="[mainData.roaCardPositiveUrl]"
                  fit="contain"
                >
                </el-image>
                <span class="haruyuki-text">法人身份证人像面</span>
              </div>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="haruyuki-image-preview">
              <div class="haruyuki-image">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="mainData.roaCardBackUrl"
                  z-index="5000"
                  :preview-src-list="[mainData.roaCardBackUrl]"
                  fit="contain"
                >
                </el-image>
                <span class="haruyuki-text">法人身份证国徽面</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" v-if="mainData.userCate == 1">
            <span>公司名称：{{ mainData.compName }}</span>
          </el-col>
          <el-col :span="6" v-if="mainData.userCate == 1">
            <span>营业执照编号：{{ mainData.roaLicenseNo }}</span>
          </el-col>
          <el-col :span="6" v-if="mainData.userCate == 1">
            <span>营业执照有效期：{{ mainData.roaLicenseTime }}</span>
          </el-col>
          <el-col :span="6">
            <span>法人名称：{{ mainData.roaName }}</span>
          </el-col>
          <el-col :span="6">
            <span>身份证号：{{ mainData.roaCardNo }}</span>
          </el-col>
          <el-col :span="6">
            <span>法人身份证有效期：{{ mainData.roaCardTime }}</span>
          </el-col>
        </el-row>
      </div>
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-bank-card"></i
          ><span class="haruyuki-ml-6">{{ labelData.cardTitle }}</span>
        </div>
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="small"
          v-if="mainData.roaStatus == '1' || mainData.roaStatus == '4'"
          @click="getCardEdit(cardData)"
          >变更结算卡</el-button
        >
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="24">
            <span>认证照片：</span>
          </el-col>
          <el-col :span="3" v-if="mainData.userCate != 0">
            <div class="haruyuki-image-preview">
              <div class="haruyuki-image">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="cardData.robCardPublicImgUrl"
                  z-index="5000"
                  :preview-src-list="[cardData.robCardPublicImgUrl]"
                  fit="contain"
                >
                </el-image>
                <span class="haruyuki-text">对公开户证明</span>
              </div>
            </div>
          </el-col>
          <el-col :span="3" v-if="mainData.userCate == 0">
            <div class="haruyuki-image-preview">
              <div class="haruyuki-image">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="cardData.robBankPositiveUrl"
                  z-index="5000"
                  :preview-src-list="[cardData.robBankPositiveUrl]"
                  fit="contain"
                >
                </el-image>
                <span class="haruyuki-text">结算卡正面</span>
              </div>
            </div>
          </el-col>
          <el-col :span="3" v-if="mainData.userCate == 0">
            <div class="haruyuki-image-preview">
              <div class="haruyuki-image">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="cardData.robBankBackUrl"
                  z-index="5000"
                  :preview-src-list="[cardData.robBankBackUrl]"
                  fit="contain"
                >
                </el-image>
                <span class="haruyuki-text">结算卡反面</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <span>开户行：{{ cardData.robBank }}</span>
          </el-col>
          <el-col :span="6">
            <span>开户支行：{{ cardData.robBankBranch }}</span>
          </el-col>
          <el-col :span="6">
            <span>开户名称：{{ cardData.robBankName }}</span>
          </el-col>
          <el-col :span="6">
            <span>银行账号：{{ cardData.robBankNo }}</span>
          </el-col>
          <el-col :span="6" v-if="cardData.bankMobile">
            <span>银行预留手机号：{{ cardData.bankMobile }}</span>
          </el-col>
        </el-row>
      </div>

      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-cpu"></i
          ><span class="haruyuki-ml-6">{{ labelData.aisleTitle }}</span>
        </div>
        <div>
          <el-button
            type="primary"
            icon="el-icon-view"
            size="small"
            @click="getPolicyEdit()"
            >查看分润</el-button
          >
        </div>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="6" v-for="(item, index) in aisleList" :key="index">
            <div @click.stop="getPolicyEdit(item.aisleCode)">
              <span class="haruyuki-color-primaryblue cursor-pointer">{{ item.aisleName }}</span>
              <span class="haruyuki-color-silverGray haruyuki-size-14" v-if="item.isDefault == '1'">（正在使用）</span>
            </div>
          </el-col>
        </el-row>
      </div>

      <div v-if="mainData.roaStatus == '1' || mainData.roaStatus == '3' || mainData.roaStatus == '4'">
        <el-row
          class="haruyuki-footer-fixed avue-affix"
          :style="{
            width: isCollapse ? 'calc(100% - 80px)' : 'calc(100% - 260px)',
          }"
        >
          <!-- <el-button
            type="success"
            size="small"
            icon="el-icon-connection"
            v-if="basicData.settlementModeStatus != '0'"
            @click="getSettlementModeEdit()"
            >变更结算模式</el-button
          > -->
          <el-button
            type="primary"
            size="small"
            icon="el-icon-edit"
            v-if="mainData.roaStatus == '1' || mainData.roaStatus == '3' || mainData.roaStatus == '4'"
            @click="getInfoEdit(mainData, cardData)"
            >变更审核</el-button
          >
          <el-button
            type="info"
            size="small"
            icon="el-icon-close"
            plain
            v-if="mainData.roaStatus == '3'"
            @click="getInfoCancel()"
            >取消变更</el-button
          >
        </el-row>
      </div>
    </section>
    <el-dialog
      title="变更结算卡"
      top="1%"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="cardVisible"
    >
      <template>
        <div>
          <card-form
            :cardForm="cardForm"
            :serviceType="mainData.userCate"
            ref="toCardForm"
          />
        </div>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button
          icon="el-icon-check"
          size="small"
          type="primary"
          v-preventClick
          @click.stop="getCardEditForm"
          >提 交</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="变更审核"
      top="1%"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <!-- <template>
        <div class="el-dialog-div" v-show="active == 0">
          <basic-form :basicForm="basicForm" ref="toBasicForm" />
        </div>
      </template> -->
      <template>
        <div>
          <main-form
            :mainForm="mainForm"
            :serviceType="mainForm.userCate"
            :parentService="basicData.parentServiceNo"
            ref="toMainForm"
          />
          <card-form
            :cardForm="cardForm"
            :serviceType="mainForm.userCate"
            ref="toCardForm"
          />
        </div>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button
          icon="el-icon-check"
          size="small"
          type="primary"
          v-preventClick
          @click.stop="handleSubmit"
          >提 交</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      v-if="policyVisible"
      :title="labelData.policyTitle"
      append-to-body
      :visible.sync="policyVisible"
    >
      <template>
        <div v-if="basicData.parentServiceNo == '0'">
          <policy-org :oem="service" :aisleCode="aisleCode" :aisleCodeList="aisleCodeList" identity-type="self" ref="toPolicyOrg" />
        </div>
        <div v-else>
          <policy-form :oem="service" :aisleCode="aisleCode" :aisleCodeList="aisleCodeList" identity-type="self" ref="toPolicyForm" />
        </div>
      </template>
      <span slot="footer" class="dialog-footer">
        
      </span>
    </el-dialog>
  </basic-container>
</template>

<script>
import {
  getInfoDetail,
  infoUpdate,
  infoCancel,
  bankUpdate,
  updateSettlementMode,
} from "@/api/rb-service/serviceinfo/service_info";

// import basicForm from "@/components/rb-service/basic-form";
import mainForm from "@/components/rb-service/main-form";
import cardForm from "@/components/rb-service/card-form";
import policyForm from "@/components/rb-service/policy-form";
import policyOrg from "@/components/rb-service/policy-org";
// import { getDictionary } from "@/api/system/dict";
import { mapGetters } from "vuex";

export default {
  components: {
    // basicForm,
    mainForm,
    cardForm,
    policyForm,
    policyOrg
  },
  data() {
    return {
      labelData: {
        basicTitle: "个人信息",
        walletTitle: "服务商钱包",
        mainTitle: "实名信息",
        cardTitle: "结算卡信息",
        aisleTitle: "支付通道",
        policyTitle: "通道分润",
      },
      dialogVisible: false,
      policyVisible: false,
      cardVisible: false,
      service: {},
      isCard: false,
      // active: 0,
      basicData: {},
      mainData: {},
      cardData: {},
      basicForm: {},
      mainForm: {},
      cardForm: {},
      aisleList: [], //通道列表 显示
      aisleCodeList: [],
      aisleCode: "", //点击赋值 通道编号
      roaStatusName: "", //认证审核状态 名称
      settlementStatusName: "", //结算模式审核状态 名称 (status: 1-月结 2-日结)
    };
  },
  computed: {
    ...mapGetters(["isCollapse", "permission"]),
    exhibition() {
      return (val) => {
        if (val == "" || val == "-1") {
          return (val = 0);
        } else {
          return val;
        }
      };
    },
    getRoaStatus() {
      return (val) => {
        if (val == "0") {
          return val = '';
        } else if (val == "1") {
          return val = 'success';
        } else if (val == "2") {
          return val = 'danger';
        } else {
          return val = 'warning';
        }
      };
    },
    getSettlementMode() {
      return (val) => {
        if (val == "1") {
          return val = '月结';
        } else if (val == "2") {
          return val = '日结';
        } else {
          return val = '';
        }
      };
    },
    getSettlementStatus() {
      return (val) => {
        if (val == "0") {
          return val = '审核中';
        } else if (val == "1") {
          return val = '已审核';
        } else {
          return val = '';
        }
      };
    }
  },
  created() {
    this.infoData();
  },
  mounted() {},
  methods: {
    /* 页面加载 初始化请求详情接口 */
    async infoData() {
      await getInfoDetail().then((res) => {
        this.service = {
          userNo: res.data.data.baseInfo.userNo,
          userType: "2"
        }
        res.data.data.baseInfo.serviceType =
          res.data.data.baseInfo.serviceType + "";
        res.data.data.baseInfo.isCooperate =
          res.data.data.baseInfo.isCooperate + "";
        res.data.data.baseInfo.cooperateState =
          res.data.data.baseInfo.cooperateState + "";
        res.data.data.baseInfo.profitState =
          res.data.data.baseInfo.profitState + "";
        this.basicData = res.data.data.baseInfo;
        this.basicData.provinceCityArea = [
          this.basicData.province,
          this.basicData.city,
          this.basicData.area,
        ];

        this.mainData = res.data.data.authInfo;
        this.cardData = res.data.data.bankInfo;
        this.aisleList = res.data.data.aisleList;
        this.cardData.userNo = this.basicData.userNo;
        this.mainData.userNo = this.basicData.userNo;
        this.$nextTick(()=>{
            this.basicData.settlementModeStatus = this.basicData.settlementModeStatus + "";
            this.mainData.roaStatus = this.mainData.roaStatus + "";
            this.mainData.userCate = this.mainData.userCate + "";
            // if (this.mainData.roaStatus) {
            //   getDictionary({ code: "roa_status" }).then((res) => {
            //     let data = res.data.data;
            //     let temp = data.find((item) => item.dictKey == this.mainData.roaStatus);
            //     this.roaStatusName = temp.dictValue;
            //   });
            // }
        })
      });
    },
    /* 点击结算卡信息 处理回显数据 */
    getCardEdit(cardData) {
      this.cardVisible = true;
      this.dialogText = this.labelData.cardTitle;
      cardData.provinceCityArea = [
        cardData.province,
        cardData.city,
        cardData.area
      ];
      this.cardForm = JSON.parse(JSON.stringify(cardData));
      this.$nextTick(() => {
        this.$refs["toCardForm"].robBankFileList.length == 0 &&
        this.cardForm.robBankPositiveUrl
          ? this.$refs["toCardForm"].robBankFileList.push({
              url: this.cardForm.robBankPositiveUrl || "",
            })
          : this.$refs["toCardForm"].robBankFileList;
        this.$refs["toCardForm"].robBackFileList.length == 0 &&
        this.cardForm.robBankBackUrl
          ? this.$refs["toCardForm"].robBackFileList.push({
              url: this.cardForm.robBankBackUrl || "",
            })
          : this.$refs["toCardForm"].robBackFileList;
        this.$refs["toCardForm"].robCardFileList.length == 0 &&
        this.cardForm.robCardPublicImgUrl
          ? this.$refs["toCardForm"].robCardFileList.push({
              url: this.cardForm.robCardPublicImgUrl || "",
            })
          : this.$refs["toCardForm"].robCardFileList;
      });
    },
    /* 结算卡信息 提交修改 */
    getCardEditForm() {
      this.$refs["toCardForm"].$refs["cardForm"].validate((valid) => {
        if (valid) {
          const formData = {
            ...this.cardForm,
          };
          bankUpdate(formData).then(
            (res) => {
              if (res.data.code == "200") {
                this.infoData();
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.cardVisible = false;
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            },
            (error) => {
              window.console.log(error);
            }
          );
        } else {
          return false;
        }
      });
    },
    /* 服务商个人信息 实名/结算卡信息回显  */
    getInfoEdit(mainData, cardData) {
      this.mainForm = JSON.parse(JSON.stringify(mainData));
      this.cardForm = JSON.parse(JSON.stringify(cardData));
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["toMainForm"].roaLicenseFileList.length == 0 &&
        this.mainForm.roaLicenseImageUrl
          ? this.$refs["toMainForm"].roaLicenseFileList.push({
              url: this.mainForm.roaLicenseImageUrl || "",
            })
          : this.$refs["toMainForm"].roaLicenseFileList;
        this.$refs["toMainForm"].roaPositiveFileList.length == 0 &&
        this.mainForm.roaCardPositiveUrl
          ? this.$refs["toMainForm"].roaPositiveFileList.push({
              url: this.mainForm.roaCardPositiveUrl || "",
            })
          : this.$refs["toMainForm"].roaPositiveFileList;
        this.$refs["toMainForm"].roaCardBackFileList.length == 0 &&
        this.mainForm.roaCardBackUrl
          ? this.$refs["toMainForm"].roaCardBackFileList.push({
              url: this.mainForm.roaCardBackUrl || "",
            })
          : this.$refs["toMainForm"].roaCardBackFileList;

        this.$refs["toCardForm"].robBankFileList.length == 0 &&
        this.cardForm.robBankPositiveUrl
          ? this.$refs["toCardForm"].robBankFileList.push({
              url: this.cardForm.robBankPositiveUrl || "",
            })
          : this.$refs["toCardForm"].robBankFileList;
        this.$refs["toCardForm"].robBackFileList.length == 0 &&
        this.cardForm.robBankBackUrl
          ? this.$refs["toCardForm"].robBackFileList.push({
              url: this.cardForm.robBankBackUrl || "",
            })
          : this.$refs["toCardForm"].robBackFileList;
        this.$refs["toCardForm"].robCardFileList.length == 0 &&
        this.cardForm.robCardPublicImgUrl
          ? this.$refs["toCardForm"].robCardFileList.push({
              url: this.cardForm.robCardPublicImgUrl || "",
            })
          : this.$refs["toCardForm"].robCardFileList;
      });
    },
    /* 服务商个人信息 取消变更  */
    getInfoCancel() {
        infoCancel().then(
          (res) => {
            if (res.data.code == "200") {
              this.infoData();
              this.$message({
                type: "success",
                message: "取消变更成功!",
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.message,
              });
            }
          },
          (error) => {
            window.console.log(error);
          }
        );
    },
    /* 服务商结算模式 变更 */
    getSettlementModeEdit() {
      this.$confirm(`是否变更结算模式为${this.basicData.settlementMode=='2'?'月结':'日结'}?`, '变更结算模式', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        updateSettlementMode().then(
          (res) => {
            if (res.data.code == "200") {
              this.infoData();
              this.$message({
                type: "success",
                message: "操作成功!",
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.message,
              });
            }
          },
          (error) => {
            window.console.log(error);
          }
        );
      }).catch(() => {
        
      });
      
    },
    /* 服务商编辑实名/结算卡 提交处理 */
    handleSubmit() {
      Promise.all([
        this.$refs["toMainForm"].$refs["mainForm"].validate(),
        this.$refs["toCardForm"].$refs["cardForm"].validate(),
      ]).then(() => {
        //表示两个表单同时验证成功  进行接口请求操作
        infoUpdate({authForm: this.mainForm, bankForm: this.cardForm}).then(
          (res) => {
            if (res.data.code == "200") {
              this.infoData();
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.dialogVisible = false;
            } else {
              this.$message({
                type: "error",
                message: res.data.message,
              });
            }
          },
          (error) => {
            window.console.log(error);
          }
        );
      });
    },
    handleClose(done) {
      this.emptyForm();
      done();
    },
    emptyForm() {
      //   this.$refs["toBasicForm"].$refs["basicForm"].resetFields();
      this.$refs["toMainForm"].$refs["mainForm"].resetFields();
      this.$refs["toCardForm"].$refs["cardForm"].resetFields();
    },
    /* 点击某项支付通道 处理分润政策回显数据 */
    getPolicyEdit(code) {
      this.aisleCodeList = [];
      if (code) {
        this.aisleCodeList.push(code);
      } else {
        for (const item of this.aisleList) {
          this.aisleCodeList.push(item.aisleCode);
        }
      }
      this.policyVisible = true;
    },
    /* 返回页面 */
    goBack() {
      this.$router.$avueRouter.closeTag();
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.el-transfer-panel__list.is-filterable {
  width: 400px !important;
  height: 500px !important;
}

/deep/.el-transfer-panel {
  width: 400px !important;
  height: 500px !important;
}

.picture-preview {
  color: #409eff;
  cursor: pointer;
}

.tag-custom {
  color: #ffcc33;
  border: 0;
}
</style>